<!-- 新建商品 -->
<template>
  <div>
    <el-button type="primary"
               @click="addClassClick">新增分类</el-button>
    <el-button type="primary"
               @click="addGoodsClick">新增商品</el-button>
  </div>
  <el-table :data="tableData"
            border
            stripe>
    <el-table-column prop="good_name"
                     align="center"
                     label="商品名"
                     width="130" />
    <el-table-column prop="classification"
                     label="所属分类"
                     align="center"
                     width="130" />
    <el-table-column prop="good_detail"
                     align="center"
                     label="商品详情" />
    <el-table-column label="商品图片"
                     align="center"
                     width="150">
      <template #default="scope">
        <el-image :src="scope.row.good_pic">
          <template #placeholder>
            <div class="image-slot">Loading<span class="dot">...</span></div>
          </template>
        </el-image>
      </template>
    </el-table-column>
    <el-table-column prop="create_time"
                     align="center"
                     label="创建时间"
                     width="250" />
    <el-table-column label="是否删除"
                     align="center"
                     width="100">
      <template #default="scope">
        <el-tag type="success"
                v-if="scope.row.is_delete == 0">未删除</el-tag>
        <el-tag type="info"
                v-else>已删除</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="是否下架"
                     align="center"
                     width="100">
      <template #default="scope">
        <el-tag type="success"
                v-if="scope.row.is_xiajia == 0">未下架</el-tag>
        <el-tag type="info"
                v-else>已下架</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作"
                     align="center"
                     width="180">
      <template #default="scope">
        <el-button type="text"
                   size="small"
                   @click="changeGood(scope.row)">修改</el-button>
        <el-button type="text"
                   size="small">下架</el-button>
        <el-button type="text"
                   size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:currentPage="page"
                 v-model:page-size="size"
                 background
                 :page-sizes="[10, 20, 30, 40]"
                 :small="small"
                 layout=" -> ,total, sizes, prev, pager, next"
                 :total="total"
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange">
  </el-pagination>
  <!-- 新增分类的dialog -->
  <el-dialog v-model="addClassDialogVisible"
             title="请输入分类名"
             center
             :before-close="classDiaClose"
             width="30%">
    <el-form>
      <el-form-item label="分类名:">
        <el-input v-model="className"></el-input>
      </el-form-item>
    </el-form>
    <span class="dialog-footer">
      <el-button @click="resetClass">重置</el-button>
      <el-button type="primary"
                 @click="classSubmit">确定</el-button>
    </span>
  </el-dialog>
  <!-- 新增商品的dialog -->
  <el-dialog v-model="dialogFormVisible"
             title="Shipping address">
    <el-form :model="form">
      <el-form-item label="商品名:"
                    :label-width="formLabelWidth">
        <el-input v-model="form.name"
                  autocomplete="off" />
      </el-form-item>
      <el-form-item label="Zones"
                    :label-width="formLabelWidth">
        <el-select v-model="form.region"
                   placeholder="Please select a zone">
          <el-option label="Zone No.1"
                     value="shanghai" />
        </el-select>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { defineComponent, reactive, ref } from "vue";
import { queryGood, addClass } from '@/api/goods_manage.js'
export default defineComponent({
  setup() {
    const page = ref(1)
    const size = ref(10)
    const total = ref(0)
    // 获取商品表格
    const tableData = ref([])
    const getTable = () => {
      try {
        let popstVal = { page: page.value, size: size.value }
        queryGood(popstVal).then(res => {
          if (res && res.status !== '0') return ElMessage({
            message: res.message,
            type: 'error',
          })
          tableData.value = res.data
          total.value = res.total
        })
      } catch (err) {
        console.log(err);
      }
    }
    getTable()
    // 新增分类
    const addClassDialogVisible = ref(false)
    const className = ref('')
    const addClassClick = () => {
      addClassDialogVisible.value = true
    }
    const classSubmit = () => {
      try {
        addClass({ class_name: className.value }).then(res => {
          if (res && res.status !== '0') return ElMessage({
            message: res.message,
            type: 'error',
          })
          return ElMessage({
            message: '新增分类成功！',
            type: 'success',
          })
        })
      } catch (err) {
        console.log(err);
      }
    }
    const resetClass = () => {
      className.value = ''
    }
    const classDiaClose = () => {
      addClassDialogVisible.value = false
      className.value = ''
    }
    // 新增商品
    const form = ref({})
    const dialogFormVisible = ref(false)
    const addGoodsClick = () => {
      dialogFormVisible.value = true
    }
    // 条数发生变化
    const handleSizeChange = (value) => {
      size.value = value
      getTable()
    }
    // 页数发生变化
    const handleCurrentChange = (value) => {
      page.value = value
      getTable()
    }
    // 修改商品信息
    const changeGood = (row) => {
      console.log(row);
    }
    return { tableData, className, addGoodsClick, dialogFormVisible, form, classDiaClose, resetClass, classSubmit, changeGood, handleSizeChange, handleCurrentChange, addClassDialogVisible, addClassClick, page, size, total };
  },
});
</script>

<style scoped lang="less">
.el-table {
  margin-top: 20px;
}
.dialog-footer {
  margin-top: 20px;
  float: right;
}
</style>